.homepage-showcase {
  & .rule {
    flex-wrap: wrap;
  }

  & .rule-value {
    width: 120px;
  }

  & input[type='checkbox'] {
    width: auto;
  }

  @media screen and (min-width: 1200px) {
    & .rule {
      flex-wrap: nowrap;
    }
    & .rule-value {
      width: auto;
    }
  }

  & .react-datepicker-popper {
    z-index: 99;
  }

  @media screen and (min-width: 768px) {
    & .extended-queryBuilder {
      display: grid !important;
      grid-template-columns: auto 1fr;
      height: fit-content;
    }
  }

  & .extended-queryBuilder {
    gap: 1rem;

    & .ruleGroup-header,
    & .rule-remove {
      display: none;
    }

    & .react-datepicker-wrapper {
      width: auto;
    }

    & .slider-wrapper {
      width: 16rem;

      & .slider {
        width: 100%;
        height: 100%;

        & .track {
          height: 8px;
          top: -4px;
          border: 1px solid #888888;
        }
        & .track.track-0 {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        & .track.track-1 {
          background: #83a9ff;
          border: 1px solid #4477ff;
        }
        & .track.track-2 {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        & .thumb {
          cursor: pointer;
          background: whitesmoke;
          border: 1px solid #4477ff;
          border-radius: 50%;
          color: #4477ff;
          top: -12px;
          outline: none;
          width: 24px;
          height: 24px;
          font-size: smaller;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        & .thumb.active {
          background-color: #83a9ff;
          color: white;
        }
      }
    }
  }

  & .custom-styling {
    & .ruleGroup {
      border-color: rgba(0, 0, 0, 0);
      background-color: rgba(0, 160, 52, 0.3);
      box-shadow: inset 2px 2px 6px 0 rgb(0 0 0 / 40%);
      padding: 1rem;
    }

    & .rule-remove,
    & .ruleGroup-remove {
      order: -1;
      display: flex;
      background: none;
      color: #ff663399;
      border: none;
      text-shadow: 2px 2px 3px #3333334d;
    }

    & .ruleGroup-addRule {
      margin-left: auto;
      background-color: #0000cc33;
    }

    & .ruleGroup-addGroup {
      background-color: #00330033;
    }

    & .ruleGroup-addRule,
    & .ruleGroup-addGroup {
      border: 1px solid #00000033;
      border-radius: 2px;
      box-shadow: 3px 3px 4px 0 rgb(0 0 0 / 40%);
    }

    & .rule {
      row-gap: 0;
      & .queryBuilder-dragHandle {
        margin-left: auto;
      }
    }

    & .queryBuilder-dragHandle {
      color: #3366ff99;
      text-shadow: 2px 2px 3px #3333334d;
      order: 99;
    }
  }
}

html[data-theme='dark'] {
  & .homepage-showcase {
    & .custom-styling {
      & .queryBuilder {
        background-color: #2d694f30;
      }

      & .ruleGroup {
        background-color: rgba(0, 126, 48, 0.3);
        box-shadow: inset 2px 2px 6px 0 rgb(0 0 0 / 70%);
      }

      & .rule-remove,
      & .ruleGroup-remove {
        color: #ff4500b3;
        text-shadow: 2px 2px 3px #00000080;
      }

      & .ruleGroup-addRule {
        background-color: #3434ff4d;
      }

      & .ruleGroup-addGroup {
        background-color: #207e204d;
      }

      & .queryBuilder-dragHandle {
        text-shadow: 2px 2px 3px #00000080;
      }
    }
  }
}
